<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-notice-bar
      v-if="message.length > 0"
      mode="closeable"
      :text="message"
    ></van-notice-bar>
    <my-point :is_link="true"></my-point>
    <van-cell v-if="points > 0" title="赠送积分" :value="points">
      <template>
        <van-tag type="danger"> {{ points }} </van-tag>
      </template>
    </van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group title="领取积分明细">
        <van-cell
          v-for="item in bonusPoints"
          :key="item.id"
          :title="item.retailer_name"
          :label="item.update_time"
        >
          <template >
            <span>{{ item.score }}</span>
            <span v-if="item.unused_score > 0">
              + <van-tag type="warning">{{ item.unused_score }}</van-tag>
            </span>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { WxBonusPoint, getWxBonusPointList } from "@/api/member";

export default {
  name: "GainPoint",
  components: {
    NavBar,
  },
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },
  props: ["retailer_id"],
  data() {
    return {
      title: this.$route.meta.title,
      points: 0,
      bonus_point_image: null,
      consume_money: null,
      user: {},
      message: "",
      bonusPoints: [],
      loading: false,
      finished: false,
      listQuery: {
        page: 1,
        page_size: 10,
        openid: localStorage.getItem("openid"),
      },
    };
  },
  mounted() {
    this.updatePoints();
    // this.getPointsByOpenid();
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        this.getPointsByOpenid();
      }, 500);
    },
    updatePoints() {
      const data = {
        retailer_id: this.retailer_id,
        money: this.$route.query.money,
        key: this.$route.query.key,
        pid: this.$route.query.pid,
      };

      WxBonusPoint(data)
        .then((res) => {
          const data = res.data;
          if (data.status_code == 200) {
            this.user = data.data;
            this.message = data.message;
            this.points = data.points;
            this.$toast.success(data.message);
          } else {
            this.user = data.data;
            this.message = data.message;
            this.$toast(data.message);
          }
        })
        .catch(() => {
          this.$toast("获取信息错误!");
        });
    },
    getPointsByOpenid() {
      this.loading = true;
      getWxBonusPointList(this.listQuery)
        .then((res) => {
          if (res.data.results.length === 0) {
            this.bonusPoints = []; // 清空数组
            this.finished = true; // 停止加载
          }
          this.listQuery.page = res.data.page;
          this.bonusPoints.push(...res.data.results);
          this.loading = false;

          if (this.bonusPoints.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$notify({
            type: "danger",
            message: "获取历史数据失败！",
          });
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>